<template>
  <div>
    <el-select v-model="queryCheckInput" clearable placeholder="请选择">
    <el-option
      label="待审核"
      :value="1">
    </el-option>
    <el-option
      label="姓名"
      :value="2">
    </el-option>
  </el-select>
    <el-input
      style="width: 20vw"
      placeholder="请输入要查询的用户姓名..."
      v-model="query"
      clearable
    >
    </el-input>
    <el-button type="primary" @click="Querycheck" style="margin-left:10px;">点击查询</el-button>
    <el-button type="primary" @click="update">点击刷新页面</el-button>
    <el-button
      type="primary"
      style="margin-left: 10vw"
      @click="dialogVisible = true"
      >添加用户</el-button
    >
    <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form ref="userForm" :model="userForm" label-width="80px" :rules="rules">
        <el-form-item label="用户名">
          <el-input v-model.trim="userForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model.trim="userForm.password"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model.trim="userForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model.number="userForm.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model.trim="userForm.idcard" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div>
      <!-- 页面渲染 -->
      <el-table
        :data="userData"
        height="564"
        border
        style="width: 100%"
        :row-style="{ height: '52.5px' }"
      >
        <el-table-column prop="uname" label="姓名" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证号"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="{ row }">
            <div>
              <a href="#" @click.prevent="getApply(row)">{{row.state === 1 ? '通过审核' : '未提交'}}</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination :total="companiesCount" @transfer="CurrentChange">
        </pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getLandLordAPI, getQueryNameAPI, getSubmitAPI, getqueryCheckAPI } from '@/api/getLandlordAPI'
import { getRegisterAPI } from '@/api/getLoginAPI'
import pagination from '@/components/pagination/MyPagination.vue'
export default {
  data() {
    return {
      // 每页的数据数量
      companiesCount: 10,
      awaitCheckUser: [],
      queryCheckInput: '',
      // 查询
      query: '',
      dialogVisible: false,
      params: {
        page: 1,
        size: 10
      },
      userForm: {
        username: '',
        password: '',
        uname: '',
        phone: '',
        idcard: ''
      },
      // 校验字段
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        uname: [
          { type: 'string', required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { type: 'number', required: true, message: '请输入手机号', trigger: 'blur' },
          {
            min: 11,
            message: '手机号为11位',
            trigger: 'blur'
          }
        ],
        idcard: [
          { type: 'string', required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            min: 18,
            message: '身份证为18位',
            trigger: 'blur'
          }
        ]
      },
      userData: [],
      userRole: '普通用户',
      identification: ''
    }
  },
  methods: {
    // 分页跳转
    CurrentChange(currentPage) {
      // 把当前页码给当前页面
      this.params.page = currentPage

      if (this.identification === 1) {
        this.getUser()
      } else if (this.identification === 2) {
        this.getQueryName()
      } else if (this.identification === 3) {
        this.Querycheck()
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$refs.userForm.resetFields()
          done()
        })
        .catch((_) => {})
    },
    // 添加用户
    async onSubmit() {
      const { data: res } = await getRegisterAPI(this.userForm)
      if (res.code === 20011) {
        this.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.$refs.userForm.resetFields()
        this.getUser()
      }
    },
    // 刷新页面
    update() {
      this.getUser()
    },

    // 查询名字和待审核模块
    async Querycheck() {
      if (this.queryCheckInput === 1) {
        const { data: res } = await getqueryCheckAPI({ state: String(this.queryCheckInput), page: this.params.page, size: this.params.size })
        this.companiesCount = res.data.totalElements
        this.identification = 3
        this.userData = res.data.list
      } else if (this.queryCheckInput === 2) {
        if (this.query === '') {
          return this.$message({
            showClose: true,
            message: '输入框不可为空',
            type: 'warning'
          })
        }
        this.getQueryName()
      } else {
        this.$message({
          showClose: true,
          message: '请选择要查询的选项',
          type: 'warning'
        })
      }
    },
    // 查询名字
    async getQueryName() {
      if (this.query === '') return
      const { data: res } = await getQueryNameAPI({ userRole: this.userRole, uname: this.query, page: this.params.page, size: this.params.size })
      if (res.code === 20041) {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'success'
        })
        this.userData = res.data.content
        this.companiesCount = res.data.totalElements
        this.identification = 2
      } else {
        this.$message({
          showClose: true,
          message: res.msg,
          type: 'warning'
        })
      }
    },
    // 通过房东审核
    async getApply(row) {
      if (row.state === 1) {
        const { data: res } = await getSubmitAPI({ id: row.id, state: row.state })
        this.getUser()
      } else {
        this.$message({
          showClose: true,
          message: '待申请',
          type: 'warning'
        })
      }
    },
    // 查询用户渲染页面
    async getUser() {
      const { data: res } = await getLandLordAPI({ userRole: this.userRole, page: this.params.page, size: this.params.size })
      if (res.code === 20031) {
        this.userData = res.data.list
        this.companiesCount = res.data.totalElements
        this.identification = 1
      }
    }
  },
  created() {
    this.getUser()
  },
  components: { pagination }
}
</script>
<style scoped>
.pagination {
  text-align: center;
}
</style>
